<template>
  <header>
    <nav class="nav-container">
      <div class="nav-left">
        <div class="logo">RAGent</div>
        <ul class="nav-menu">
          <li><router-link to="/ai-chat" :class="{ active: isActive('/ai-chat') }">智能问答</router-link></li>
          <li><router-link to="/dashboard" :class="{ active: isActive('/dashboard') }">数据看板</router-link></li>
          <li><router-link to="/knowledge-management" :class="{ active: isActive('/knowledge-management') }">知识库</router-link></li>
        </ul>
      </div>
      <div class="nav-right">
        <div class="user-menu" @click="toggleUserMenu">
          <div class="user-avatar">{{ userAvatar }}</div>
          <span>{{ username }}</span>
          <div class="dropdown-arrow">▼</div>
          <div v-if="showUserMenu" class="user-dropdown">
            <div class="dropdown-item" @click="goToChangePassword">修改密码</div>
          </div>
        </div>
      </div>
    </nav>
  </header>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      username: 'username',
      userAvatar: 'U',
      showUserMenu: false
    };
  },
  methods: {
    isActive(path) {
      return this.$route.path === path;
    },
    toggleUserMenu() {
      this.showUserMenu = !this.showUserMenu;
    },
    goToChangePassword() {
      this.$router.push('/change-password');
      this.showUserMenu = false;
    },
    async fetchUserInfo() {
      try {
        const token = localStorage.getItem('access_token');
        if (!token) {
          this.$router.push('/');
          return;
        }

        const response = await fetch('/api/users/me', {
          method: 'GET',
          headers: {
            'Authorization': `Bearer ${token}`,
            'Content-Type': 'application/json'
          }
        });

        if (response.ok) {
          const userData = await response.json();
          this.username = userData.username || userData.email || '用户';
          // 使用用户名的第一个字符作为头像，如果不可用则使用默认值
          this.userAvatar = this.username.charAt(0).toUpperCase() || 'U';
        } else {
          // 如果请求失败，清除token并重定向到登录页
          localStorage.removeItem('access_token');
          this.$router.push('/');
        }
      } catch (error) {
        console.error('获取用户信息失败:', error);
      }
    }
  },
  mounted() {
    this.fetchUserInfo();
    
    // 点击其他地方关闭下拉菜单
    document.addEventListener('click', (event) => {
      if (!this.$el.contains(event.target)) {
        this.showUserMenu = false;
      }
    });
  }
};
</script>

<style scoped>
.nav-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0 2rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-left {
  display: flex;
  align-items: center;
  height: 60px;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
  margin-right: 2rem;
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 1rem;
}

.nav-menu li a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.nav-menu li a:hover,
.nav-menu li a.active {
  color: white;
  background: rgba(255, 255, 255, 0.1);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.notification-btn {
  background: none;
  border: none;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  position: relative;
  padding: 0.5rem;
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #ff4757;
  color: white;
  border-radius: 50%;
  font-size: 0.7rem;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  position: relative;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.dropdown-arrow {
  font-size: 0.7rem;
  margin-left: 0.3rem;
  transition: transform 0.3s ease;
}

.user-menu:hover .dropdown-arrow {
  transform: rotate(180deg);
}

.user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: white;
  color: #333;
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 120px;
  z-index: 1000;
  margin-top: 0.5rem;
}

.dropdown-item {
  padding: 0.8rem 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

.dropdown-item:hover {
  background: #f5f5f5;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>